<template>
	<view>
		<view class="box">
			<view class="menu_content_box_page">
				<view class="pa15">
					<view class="mt15 area_block_1" v-for="item, index in list" :key="index">
						<view class="flex_box" v-if="item.beMine">
							<view class="re mr25">
								<image :src="item.imgUrl" class="img17 vt"></image>
							</view>
							<view class="item">
								<view class="df fldc jcsb hp100">
									<view class="fs28 lh34 cor_333 ell"
										style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
										{{item.title}}</view>
									<view class="flex_box aic">
										<view class="item" v-if="item.createTime && item.createTime != null">
											<view class="fs22 cor_808">
												下单时间：{{item.createTime && item.createTime != null ? item.createTime.slice(0,10) : ''}}
											</view>
										</view>
									</view>
									<view class="flex_box aic">
										<view class="item">
											<view class="fs22 cor_808">接单人：{{item.worker ? item.worker : ''}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						
						
						
						<view class="flex_box" @tap="toDetail(item)" v-if="!item.beMine">
							<view class="re mr25">
								<image :src="item.imgUrl" class="img17 vt"></image>
							</view>
							<view class="item">
								<view class="df fldc jcsb hp100">
									<view class="fs28 lh34 cor_333 ell"
										style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
										{{item.title}}</view>
									<view class="flex_box aic">
										<view class="item">
											<view class="fs22 cor_808">
												下单时间：{{item.createTime && item.createTime != null ? item.createTime.slice(0,10) : ''}}
											</view>
										</view>
										<view class="df aic" >
											<image src="/static/icon_location.png" class="img3"></image>
											<view class="ml5 fs22 cor_808">{{item.place}}</view>
										</view>
									</view>
									<view class="flex_box aic">
										<view class="item">
											<view class="fs22 cor_808">下单人：{{item.customer && item.customer != null ? item.customer.slice(0,10) : ''}}</view>
										</view>
										<view class="fs22 cor_808">{{item.phone}}</view>
									</view>
						
									<view class="fs22 cor_808" >
										状&emsp;&emsp;态：{{item.state == 1 ? '未接单': (item.state == 2 ? '未完成' : '已完成')}}
									</view>
									
								</view>
							</view>
						</view>


						<view class="mt10 tar" v-if="item.state == 1">
							<view class="see_btn" v-if="item.beMine" @tap.stop="cancel(item.id)">撤销</view>
							<view class="see_btn" v-if="!item.beMine" @tap.stop="takeOrder(item.id)">接单</view>
						</view>
						<image v-if="item.state == 1" src="/static/icon_watermark_6.png" class="watermark_img_pos">
						</image>
						
					</view>


					<view v-if="list.length == 0" style="width: 100%;height: 100vh">
						<view style="height: 200rpx;"></view>
						<image src="../../static/excavator.png" style="width: 100%; padding: 100rpx 200rpx;"></image>
						<view style="width: 100%;text-align: center;color: #808080;">暂无数据</view>
					</view>

				</view>
			</view>
		</view><!-- box -->
	</view>
</template>

<script>
	import {
		toast,
		showLoading,
		hideLoading
	} from '@/utils/toast.js';
	import {
		getRepairListApi,
		deleteRepairApi,
		getRepairDetailApi,
		repairTakeOrderApi
	} from '@/http/api.js';
	export default {
		data() {
			return {
				pageIndex: 1,
				pageSize: 10,
				list: []
			}
		},
		onLoad() {
			this.getRepairList();
		},
		methods: {
			getRepairList() {
				let that = this;
				showLoading('加载中..');
				getRepairListApi({
					userId: uni.getStorageSync('userId'),
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
				}).then(res => {
					if (res.data.hasNextPage) {
						that.pageIndex = res.data.hasNextPage + 1;
					}
					for (let i in res.data.data) {
						that.list.push(res.data.data[i])
					}
					hideLoading();
				}).catch(err => {
					hideLoading();
				})
			},

			cancel(id) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定要撤销吗？',
					success: function(res) {
						if (res.confirm) {
							showLoading('加载中..');
							that.list = [];
							deleteRepairApi({
								id: id,
								userId: uni.getStorageSync('userId')
							}).then(res => {
								that.pageIndex = 1;
								that.getRepairList();
								hideLoading();
							}).catch(err => {
								toast(err.msg);
								hideLoading();
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},


			toDetail(item) {
				if (item.beMember || item.state == 3) {
					//是我自己的，或者状态是已完成
					return false;
				} else {
					uni.navigateTo({
						url: '/pages/receiving_orders/receiving_orders?id=' + item.id
					})
				}

			},

			takeOrder(id) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '这是一个模态弹窗',
					success: function(res) {
						if (res.confirm) {
							showLoading('加载中..');
							repairTakeOrderApi({
								id: id,
								workId: uni.getStorageSync('userId')
							}).then(res => {
								toast('接单成功，赶快和雇主联系吧！');
								hideLoading();
							}).catch(err => {
								toast(err.msg);
								hideLoading();
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			}
		}
	}
</script>

<style>
	page {
		background-color: #f7f6f6;
	}

	.menu_content_box_page {
		position: relative;
		/* height: 100vh; */
		background-color: #f7f6f6;
	}

	.area_block_1 {
		position: relative;
		padding: 32rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.watermark_img_pos {
		position: absolute;
		top: 86rpx;
		right: 20rpx;
		width: 92rpx;
		height: 92rpx;
		z-index: 2;
	}

	.see_btn {
		display: inline-block;
		width: 112rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		font-size: 22rpx;
		color: #fff;
		text-align: center;
		background-image: linear-gradient(90deg, #f46933, #e3140b);
		border-radius: 24rpx;
	}
</style>
